<template>
	<view>
		<wd-sticky>
			<view class="search">
				<wd-search v-model="query.logDesc" hide-cancel placeholder-left placeholder="请输入你想搜索的日志内容"
					@blur="search" />
			</view>
		</wd-sticky>
		<view class="list">
			<ConstructionItem v-for="item in logList" :item="item" :key="item.logId" />
			<wd-loadmore v-if="state" :state="state" @reload="reload" />
		</view>
		<Empty v-if="(!logList.length) && !['error', 'loading'].includes(state)" />
	</view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import ConstructionItem from '@/components/constructionItem/index.vue';
import Empty from "@/components/empty/index.vue" 
import { onReachBottom } from '@dcloudio/uni-app'
import { getList } from "@/api/construction";
const state = ref('loading');
const logList = ref([]);
const total = ref(0)

/**
 * 获取列表
 */
const getLogList = async () => {
	state.value = 'loading';
	try {
		const res = await getList(query.value);
		logList.value = [...logList.value, ...res.data.records];
		total.value = res.data.total;
		if (!logList.value.length) state.value = false;
		else if (total.value.length == logList.length) state.value = 'finished';
	} catch (error) {
		state.value = 'error'
	}
}
/**
 * 搜索
 */
const search = () => {
	query.value.size = 1;
	query.value.current = 1;
	logList.value = [];
	getLogList()
}
/**
 * 重新加载
 */
const reload = () => {
	logList.value = [];
	query.value.current = 1;
	getLogList();
}
const resetList = () => {
	logList.value = [];
	query.value = {
		size: 5,
		current: 1,
		logDesc: ''
	}
}
onReachBottom(() => {
	if (total.value > logList.value.length) {
		query.value.current += 1;
		getLogList();
	}
})
onMounted(() => {
	resetList();
	getLogList();
})
</script>

<style lang="scss" scoped>
.search {
	width: 100vw;
}

.list {
	padding: 32rpx;
}
</style>
